<template>
  <div class="spread-container" v-title data-title="我的推广">
    <div class="spread-top">
      <div class="rules" @click="showRules">规则说明</div>
      <div class="spread-bg"></div>
      <div class="card">
        <div class="card-top">
          <img :src="spreadDetail.rankImg" class="badge"/>
          <div class="flex-col card-top-right">
            <span class="level-name">{{spreadDetail.rankName}}</span>
            <span>分享越多 ，等级越高</span>
          </div>
        </div>
        <div class="card-bottom">
          <div class='time-dots-box' v-for="(item,index) in levelList"
               :style="{width:(index==levelList.length-1?'.1rem':'')}">
            <div class='dot' :class="{'active':item.levelName===spreadDetail.rankName}"></div>
            <div class='min'>{{item.levelName}}</div>
            <div class='line' v-if='index==levelList.length-1?false:true'></div>
          </div>
        </div>
      </div>
      <div class="flex-col spread-detail">
        <div class="flex-center detail">
          <div class="flex-cell">
            <span class="key">推广总数</span>
            <span class="val">{{spreadDetail.totalSpreadNum}}</span>
          </div>
          <div class="flex-cell">
            <span class="key">今日新增</span>
            <span class="val">{{spreadDetail.todaySpreadNum}}</span>
          </div>
        </div>
        <div class="flex-center detail">
          <div class="flex-cell">
            <span class="key">我的收入</span>
            <span class="val">{{spreadDetail.totalCommision}}</span>
          </div>
          <div class="flex-cell"  @click="downloadApp()">
            <span class="key">未兑换收入</span>
            <span class="val">{{spreadDetail.totalSurplusMoney}}</span>
          </div>
        </div>
      </div>
      <button class="spread-btn" @click="spreadClick">
        立即赚赏金
      </button>
    </div>
    <div class="divide-line">

    </div>
    <div class="spread-bottom">
      <div class="select-date flex-center">
        <span>选择日期</span>
        <span class="item-value flex-center">
          <div class="item-value-date"
               @click="showDateList">
            <span v-if="selectDate">{{selectDate|dataFormat('yyyy-MM-dd')}}</span>
            <span v-if="!selectDate">请选择推广日期</span>
          </div>
          <i class="icon" @click="showDateList"></i>
          <mt-datetime-picker
            lockScroll="true"
            type="date"
            ref="datePicker"
            year-format="{value} 年"
            month-format="{value} 月"
            date-format="{value} 日"
            @confirm="dateConfirm"
            :startDate="startDate"
            :endDate="endDate"
          >
        </mt-datetime-picker>
        </span>
      </div>
      <div class="tab-box flex-center">
        <div class="tab" :class="{'active':currentTab==='today'}" @click="switchTab('today')">今日推广</div>
        <div class="tab" :class="{'active':currentTab==='history'}" @click="switchTab('history')">历史推广</div>
      </div>
      <div class="spread-content">
        <div class="item" v-for="item in extensionList">
          <span class="phone">{{item.registerPhone|fieldEllipsis}}</span>
          <span class="date">{{item.registerTime|dataFormat('yyyy-MM-dd hh:mm:ss')}}</span>
        </div>
        <div class="item" v-if="!extensionList.length" style="justify-content: space-around">暂无数据</div>
      </div>
    </div>
    <shared ref="shared"></shared>
    <download-app  :content="alertContent" ref="download"></download-app>
  </div>
</template>
<script>
  import Shared from '@/components/shared.vue'
  import {mapState,mapMutations} from 'vuex'
  import wechat from '@/common/wechat'
  import {httpReq} from '@/common/api'
  import  downloadApp from '@/components/alertModal.vue'
  import {appDownloadUrl} from '@/common/constant'

  export default {
    name: 'spread',
    computed: {
      ...mapState({
        token: 'token'
      })
    },
    components: {
      Shared,downloadApp
    },
    data() {
      return {
        alertContent:{
          title:'提示',
          content:'下载“满易金”APP，兑换收入',
          cancelButton:'取消',
          confirmButton:'立即下载'
        },
        extensionList:[],
        spreadDetail: {},
        extensionCode: '',
        userName: '',
        selectDate: '',
        startDate: new Date('2018-01-01'),
        endDate:new Date(),
        currentTab:'today',
        levelList: [{
          levelName: '青铜V1'
        }, {
          levelName: '白银V2'
        }, {
          levelName: '黄金V3'
        }, {
          levelName: '钻石V4'
        },]
      }
    },
    methods: {
      ...mapMutations(['changeUserTel', 'changeUserToken']),
      downloadApp(){
        this.$refs.download.confirm().then((res) => {
          if (res === 'confirm') {
            window.location.href = appDownloadUrl
          }
        })
      },
      getHistoryList(startDate,endDate){
        const params = {
          startDate:startDate,
          endDate:endDate
        }
        httpReq('GET', '/list/as/app/financial/api/extension/list/v2',params).then((res)=>{
          this.extensionList = res.rows||[];
        })
      },
      spreadClick() {
        this.$refs.shared.confirm().then((res) => {
          if (res === 'showCode') {
            httpReq('GET', '/list/as/app/financial/api/extension/link').then((res) => {
              this.$router.push({
                name: 'codeInvite',
                query: {
                  QrInfo: res.QrInfo,
                  extensionCode: res.extensionCode
                }
              })
            }).catch((err) => {
              this.$toast(err)
            })
          }
          this.$refs.shared.show = false
        })
      },
      switchTab(type){
        this.selectDate='';
        this.currentTab = type;
        if(type==='today'){
          this.getHistoryList(this.dateFormat(new Date(), 'yyyy-MM-dd'))
        }else {
          this.getHistoryList('',this.dateFormat(new Date(new Date().getTime() - 24*60*60*1000), 'yyyy-MM-dd'))
        }
      },
      showRules() {
        this.$router.push('/rules')
      },
      showDateList(){
        this.$refs.datePicker.open()
      },
      dateConfirm(val){
        this.currentTab = 'history';
        this.selectDate=val;
        this.getHistoryList(this.dateFormat(this.selectDate, 'yyyy-MM-dd'),this.dateFormat(this.selectDate, 'yyyy-MM-dd'))
      },
      //获取推广佣金
      getSpreadMoney() {
        httpReq('GET', '/list/as/app/financial/api/extension/commission').then((res) => {
          this.spreadDetail = res||{}
        }).catch((err) => {
          this.$toast(err)
        })
      },
    },
    created() {
      const token = this.$route.query.token;
      if(token){
        this.changeUserToken(token)
      }
      if (!this.token && this.$route.query.extensionCode && this.$route.query.userName) {
        this.$router.push({
          name: 'gift',
          query: {
            extensionCode: this.$route.query.extensionCode,
            userName: this.$route.query.userName
          }
        })
        return
      }
      if (!this.token) {
        this.$router.push('/login')
        return
      }
      httpReq('GET', '/list/as/app/financial/api/extension/link').then((res) => {
        const url = `${window.location.origin}/#/spread?extensionCode=${res.extensionCode}&userName=${res.userName}`
        const shareInfo = {
          title: `注册送礼包`,
          desc: `满易金新人专享礼包`,
          link: url,
          img: 'http://data.test.aishangjinrong.com/3.0/h5/PICTURES/2018/12/12/MEDIUM/65c42b481ec94db2b79694066ba9cc86.png'
        };
        wechat.wechatShare(shareInfo)
      }).catch((err) => {
        const shareInfo = {
          title: `注册送礼包`,
          desc: `满易金新人专享礼包`,
          link: `${window.location.origin}/#/gift`,
          img: 'http://data.test.aishangjinrong.com/3.0/h5/PICTURES/2018/12/12/MEDIUM/65c42b481ec94db2b79694066ba9cc86.png'
        };
        wechat.wechatShare(shareInfo)
      })
      this.getSpreadMoney();
      this.getHistoryList(this.dateFormat(new Date(), 'yyyy-MM-dd'))
    }
  }
</script>
<style lang="stylus" scoped>
  .spread-container
    position absolute
    top 0
    left 0
    bottom 0
    right 0
    .rules
      background-color #FFDA68
      width 1.32rem
      height .54rem
      border-radius .3rem 0 0 .3rem
      line-height .54rem
      color #B33C25
      text-align right
      padding-right .1rem
      position absolute
      top 1%
      right 0
    .spread-top
      background-color white
      .spread-btn
        background linear-gradient(to bottom, #FFB234, #FFF09B)
        height 1rem
        border-radius .08rem
        width 70%
        margin-left 15%
        font-size .44rem
        color #B33C25
        font-weight bold
        margin-bottom .3rem
      .spread-bg
        background url("/static/img/spread_bg.png") no-repeat
        width 100%
        height 3.4rem
        background-size 100% 100%
      .card
        width 85.5%
        height 3.7rem
        border-radius .18rem
        box-shadow 0rem .1rem .3rem #F5CAB1
        position absolute
        left 50%
        top .86rem
        transform translateX(-50%)
        padding .2rem
        box-sizing border-box
        background linear-gradient(to right, #FEDEC5, #FFCCA1, #F8B091)
        .card-top
          display flex
          align-items center
          justify-content space-between
          margin .2rem 0 .6rem 0
          .badge
            width 1.46rem
            height 1.66rem
          .card-top-right
            font-size .3rem
            text-align right
            color #7E5D46
            .level-name
              font-size .5rem
              margin-bottom .3rem
        .card-bottom
          flex: none;
          display: flex;
          font-size: .26rem;
          color: #ED9666;
          justify-content: center;
          .time-dots-box
            position: relative;
            display: flex;
            width: 28%
            height: .6rem;
          .min
            word-break keep-all
            position absolute
            left -.35rem
            top .4rem
            font-size .26rem
            color #7E5D46
          .line
            width: 100%;
            height: .08rem;
            background: #ED9666;
            position: absolute;
            left: 16 rpx;
            top: 6 rpx;
          .dot
            position: absolute;
            left: 0;
            top: -.06rem;
            width: .2rem;
            height: .2rem;
            border-radius: 50%;
            background-color: #ED9666
            z-index 1
            &.active
              background: white;

      .spread-detail
        color #525252
        font-size .32rem
        margin-top 1.25rem
        padding .4rem .66rem
        box-sizing border-box
        .detail
          justify-content space-between
          .val
            margin-left .05rem
            color #F87B54
        .detail +.detail
          margin-top .4rem
    .divide-line
      background #F6F6F6
      height .2rem
    .spread-bottom
      padding .34rem .4rem
      box-sizing border-box
      background white
      .select-date
        justify-content space-between
        color #494848
        .item-value
          color #908D8D
          .icon
            width .3rem
            height .3rem
            display inline-block
            margin-left .3rem
            background url("/static/img/go-arrow.png") no-repeat
            background-size .15rem .3rem
      .tab-box
        height .9rem
        background #F7C2A5
        color white
        font-size .32rem
        margin-top .3rem
        .tab
          text-align center
          flex 1
          height 100%
          line-height .9rem
          &.active
            background #F98B4E
      .spread-content
        padding .44rem .5rem 0 .5rem
        display flex
        flex-direction column
        color #333333
        .item
          display flex
          justify-content space-between
          line-height .7rem
</style>
